<template>
    <tree-select class="vxe-table-tree-select" :class="{ single_select: !treeProps.multiple }"
                 :value="row[column.property]" v-bind.sync="treeProps"
                 :ref="treeSelectRef" @open="handleOpenEvent"
                 @close="handleCloseEvent" @input="handleInputEvent"
                 @select="handleSelectEvent" @deselect="handleDeSelectEvent"
                 @search-change="handleSearchChangeEvent">
        <template v-if="optionLabel" #option-label="data">
            <expand-dom :column="column" :row="row" :data="data" :render="optionLabel" />
        </template>
        <template v-if="valueLabel" #value-label="data">
            <expand-dom :column="column" :row="row" :data="data" :render="valueLabel" />
        </template>
        <template v-if="beforeList" #before-list="data">
            <expand-dom :column="column" :row="row" :data="data" :render="beforeList" />
        </template>
        <template v-if="afterList" #after-list="data">
            <expand-dom :column="column" :row="row" :data="data" :render="afterList" />
        </template>
    </tree-select>
</template>

<script>
export default {
    name: "CustomTreeSelect",
    props: {
        params: Object,
        props: {
            type: Object,
            default() {
                return {};
            },
        },
        optionLabel: Function,
        valueLabel: Function,
        beforeList: Function,
        afterList: Function,
    },
    components: {
        expandDom: {
            functional: true,
            props: {
                row: Object,
                column: Object,
                render: Function,
                data: Object,
            },
            render: (h, ctx) => {
                const params = {
                    row: ctx.props.row,
                    column: ctx.props.column,
                };
                return ctx.props.render(h, params);
            },
        },
    },
    data() {
        return {
            treeOptions: {
                autoFocus: true,
                openOnFocus: true,
                appendToBody: true,
                zIndex: 9999,
                clearValueText: '清除值',
                options: [],
            },
            row: {},
            column: {},
        };
    },
    computed: {
        treeSelectRef() {
            const { row, column } = this.params;
            return `select_${ column.property }_${ row._X_ROW_KEY }`
        },
        treeProps() {
            let props = $.extend({}, this.treeOptions);
            if (this.props) {
                props = $.extend({}, props, this.props);
            }
            return props;
        },
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            const { row, column } = this.params;
            this.row = row;
            this.column = column;
        },
        handleOpenEvent(instanceId) {
            this.$emit('open', {instanceId});
        },
        handleCloseEvent(value, instanceId) {
            this.$emit('close', {value, instanceId});
        },
        handleInputEvent(value, instanceId) {
            this.$emit('input', {value, instanceId});
        },
        handleSelectEvent(node, instanceId) {
            this.$emit('select', {node, instanceId});
        },
        handleDeSelectEvent(node, instanceId) {
            this.$emit('deSelect', {node, instanceId});
        },
        handleSearchChangeEvent(searchQuery, instanceId) {
            this.$emit('searchChange', {searchQuery, instanceId});
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.vxe-table-tree-select {
    height: 36px;

    &.single_select {
        height: auto;

        /deep/.vue-treeselect__control {
            height: 24px;

            .vue-treeselect__placeholder {
                line-height: 24px;
            }

            .vue-treeselect__single-value {
                line-height: 24px;
            }

            .vue-treeselect__input {
                height: 24px;
                line-height: 24px;
            }

            .vue-treeselect__multi-value {
                margin-bottom: 0;
                height: 24px;

                .vue-treeselect__multi-value-item-container {
                    padding: 0;

                    .vue-treeselect__multi-value-item {
                        line-height: 16px;
                    }
                }
            }
        }
    }
}
</style>
